<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>订单</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui,viewport-fit=cover"/>
    <meta name="keywords" content="订单">
    <meta name="description" content="订单">
    <script type="text/javascript" src="js/base.js" charset="UTF-8"></script>
    <!-- <link rel="stylesheet" type="text/css" href="css/theme-chalk/index.css"> -->
    <!-- <link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css"> -->
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type='text/javascript' src="js/jquery.min.js" charset="UTF-8"></script>
    <!-- <script type='text/javascript' src="js/html2canvas.min.js" charset="UTF-8"></script> -->
    <script type="text/javascript" src="js/layer/layer.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/axios.min.js" charset="UTF-8"></script>
    <!-- <script type='text/javascript' src="js/elementui.min.js" charset="UTF-8"></script> -->
    <!-- <script type='text/javascript' src="js/swiper-bundle.min.js" charset="UTF-8"></script> -->
    <script type='text/javascript' src="../common/js/helper.js" charset="UTF-8"></script>
</head>
<style>
    html, body, .wrapperbox {
        height: 100%;
        overflow: hidden;
        position: relative;
    }

    .scrollbox {
        height: 100%;
        overflow: scroll;
    }
</style>
<body>
<div class="wrapperbox orderpage hasmenu" id="app" v-show="loaded==true">
    <div class="scrollbox">
        <div class="tabbarbox">
            <div class="tabbar">
                <div :class="['tab',{'active': tabIndex==0}]" @click="changetab(0)">全部</div>
                <div :class="['tab',{'active': tabIndex==1}]" @click="changetab(1)">待使用</div>
                <div :class="['tab',{'active': tabIndex==2}]" @click="changetab(2)">待支付</div>
                <div :class="['tab',{'active': tabIndex==3}]" @click="changetab(3)">已完成</div>
                <div :class="['tab',{'active': tabIndex==4}]" @click="changetab(4)">已失效</div>
            </div>
        </div>
        <div class="emptybox" v-if="datalist.length==0">
            <div class="empty">
                <div class="img"><img src="images/order-empty.png" alt=""></div>
                <p>还没有此商品的订单哦～<br>谈钱伤感情，但该剁手时就剁手</p>
            </div>
        </div>
        <div class="orderlist" v-else>
            <!-- 全部(0) 待使用/即将到期(1) 待支付(2) 已完成(3)  已失效/已取消(4) -->
            <!--                status: not_pay: 待⽀付，paid: 待使⽤，used: 已完成，expired: 已失效-->
            <!--                <div class="order" v-for="(item,i) in datalist" v-if="status!='not_pay' || status=='not_pay'&&item.status.value=='not_pay'">-->
            <div class="order" v-for="(item,i) in datalist">
                <p class="top" v-if="item.status.value!='not_pay'">
                    <span>订单：{{item.order_no}}</span>
                    <span class="status" style="color:#E30500"
                          v-if="item.status.value=='paid' && item.expire_soon==true">即将到期</span>
                    <span class="status" style="color:#34AB16"
                          v-if="item.status.value=='paid' && item.expire_soon==false">待使用</span>
                    <span class="status" style="color:#0054FF" v-if="item.status.value=='used'">已完成</span>
                    <span class="status" style="color:#464646" v-if="item.status.value=='expired'">已失效</span>
                    <span class="status" style="color:#464646" v-if="item.status.value=='canceled'">已取消</span>
                    <span class="status" style="color:#464646" v-if="item.status.value=='refunded'">已退款</span>
                </p>
                <p class="top" v-else>
                    <span>支付倒计时：<em>{{showTime[i].hh}}</em> <em>{{showTime[i].mm}}</em> <em>{{showTime[i].ss}}</em></span>
                </p>
                <div class="product" @click="viewProduct(item.product_id)">
                    <div class="img"><img :src="item.product_cover_image" alt=""></div>
                    <div class="text">
                        <!--                            <h3>好物优选 | 金龙鱼玉米油油非转基因4升</h3>-->
                        <h3>{{item.product_title}}</h3>
                        <p>套餐：{{item.spec_name}}</p>
                    </div>
                </div>
                <div class="bot">
                    <p><span>实际支付：</span><span class="price"><em>￥</em>{{item.order_amount}}</span><span>共 {{item.quantity}} 件</span>
                    </p>
                    <a class="btn" :href="'./ordershow.html?id='+item.id"
                       v-if="item.status.value!='not_pay' && item.status.value!='expired' && item.status.value!='canceled' && item.status.value!='refunded' /*不是已失效/已取消*/"><span>查看详情</span></a>
                    <a class="btn gobuy" :href="'./payagain.html?id='+item.id"
                       v-if="item.status.value=='not_pay'"><span>去支付</span></a>
                </div>
            </div>

        </div>
        <p v-if="loading==false" class="loading">加载中...</p>
        <p v-if="has_more==false && datalist.length>10" class="loading">没有更多了</p>
    </div>
    <div class="indexbotmenu">
        <a href="./index.html" class="item">
            <div class="img"><img src="images/index-botmenu-ico1.png" alt=""></div>
            <p>首页</p>
        </a>
        <a href="./order.html" class="item">
            <div class="img"><img src="images/index-botmenu-ico2-select.png" alt=""></div>
            <p>订单</p>
        </a>
        <a href="./my.html" class="item">
            <div class="img"><img src="images/index-botmenu-ico3.png" alt=""></div>
            <p>我的</p>
        </a>
    </div>
</div>
</body>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        tabIndex: 0,
        data: 1,
        page: 1,
        limit: 10,
        status: '',
        // status: not_pay: 待⽀付，paid: 待使⽤，used: 已完成，expired: 已使⽤
        datalist: [],
        showTime: [],
        getTime: null,
        allowclick: true,
        loading: true,
        has_more: true,
        firstload: true,
        loaded: false,
      }
    },
    mounted() {
      
      var that = this;
      that.getdata();
      $('.scrollbox').get(0).addEventListener('scroll', function () {
        let ele = $('.scrollbox').get(0); // 获得html
        let scrollTop = ele.scrollTop; // 向上滚动的高度
        let scrollHeight = ele.scrollHeight; // 滚动内容区域总高度
        let clientHeight = ele.clientHeight; // 可见高度
        if (clientHeight + scrollTop >= scrollHeight) { // 已经滚动到底部
          if (that.loading == true && that.has_more == true) {
            console.log(1)
            that.load()
          }
        }
      })
    },
    methods: {
      getTimeList() {
        var that = this;
        that.getTime = setInterval(function () {
          var arr = [];
          var num = 0;
          for (var i in that.showTime) {
            arr.push(that.showTime[i]);
            if (that.showTime[i].time == 0) {
              num++;
            }
          }
          for (var i in arr) {
            if (arr[i].time > 0) {
              arr[i].time -= 1000;
              // var dd = Math.floor(arr[i].time / 1000 / 60 / 60 / 24);
              var hh = Math.floor((arr[i].time / 1000 / 60 / 60) % 24);
              var mm = Math.floor((arr[i].time / 1000 / 60) % 60);
              var ss = Math.floor((arr[i].time / 1000) % 60);
              if (0 <= hh && hh < 10) {
                hh = '0' + hh
              } else if (hh < 0) {
                hh = '00'
              }
              if (0 <= mm && mm < 10) {
                mm = '0' + mm
              } else if (mm < 0) {
                mm = '00'
              }
              if (0 <= ss && ss < 10) {
                ss = '0' + ss
              } else if (ss < 0) {
                ss = '00'
              }
              // arr[i]["dd"] = dd;
              arr[i]["hh"] = hh;
              arr[i]["mm"] = mm;
              arr[i]["ss"] = ss;
            } else {
              // arr[i]["dd"] = 0;
              arr[i]["hh"] = '00';
              arr[i]["mm"] = '00';
              arr[i]["ss"] = '00';
              if (that.datalist[i].status.value == 'not_pay') {
                that.datalist[i].status.value = 'canceled';
              }

            }
          }
          that.showTime = arr;
        }, 1000);
      },
      changetab: function (num) {
        var that = this;
        if (that.tabIndex != num) {
          that.tabIndex = num;
          //全部(已取消)(0)
          that.status = '';
          if (that.tabIndex == 1) {
            //待使用/即将到期(1)
            that.status = 'paid';
          } else if (that.tabIndex == 2) {
            //待支付(2)
            that.status = 'not_pay';
          } else if (that.tabIndex == 3) {
            //已完成(3)
            that.status = 'used';
          } else if (that.tabIndex == 4) {
            //已失效(4)
            that.status = 'expired';
          }
          that.page = 1;
          that.datalist = [];
          clearInterval(that.getTime);
          that.showTime = [];
          that.firstload = true;
          that.getdata();
        }
      },
      getdata: function () {
        var that = this;
        client_get('orders?page=' + that.page + '&limit=' + that.limit + '&status=' + that.status).then(res => {
          console.log(res.list);
          that.has_more = res.has_more;
          if (res.list.length > 0) {
            $(res.list).each((i, v) => {
              that.datalist.push(v);
              var time = 0;
              if (v.auto_cancel_time) {
                v.auto_cancel_time = v.auto_cancel_time.replace(/-/g, '/');
                time = new Date(v.auto_cancel_time).getTime() - new Date().getTime();
              }
              var hh = '00', mm = '00', ss = '00';
              if (time > 0) {
                hh = Math.floor((time / 1000 / 60 / 60) % 24);
                mm = Math.floor((time / 1000 / 60) % 60);
                ss = Math.floor((time / 1000) % 60);
                if (0 <= hh && hh < 10) {
                  hh = '0' + hh
                } else if (hh < 0) {
                  hh = '00'
                }
                if (0 <= mm && mm < 10) {
                  mm = '0' + mm
                } else if (mm < 0) {
                  mm = '00'
                }
                if (0 <= ss && ss < 10) {
                  ss = '0' + ss
                } else if (ss < 0) {
                  ss = '00'
                }
              }
              // console.log(hh,mm,ss)
              that.showTime.push({'time': time,/*'dd':dd,*/'hh': hh, 'mm': mm, 'ss': ss});
            })
            if (that.firstload == true) {
              that.firstload = false;
              that.getTimeList();
            }

          }
          that.loading = true;
          that.loaded = true;
        })
      },
      load() {
        var that = this;
        that.loading = false;
        that.page++;
        that.getdata();
      },
      viewProduct(id) {
        window.location.href = 'product.html?id=' + id
      }
    }
  });
</script>
</html>